<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/web/header.jsp"%>
<title>列表</title>
</head>
<body>
	<div class="layui-collapse">
		<div class="layui-colla-item">
			<h2 class="layui-colla-title">部门信息</h2>
			<div class="layui-colla-content layui-show">
				<fieldset class="layui-elem-field layui-field-title">
					<legend>查询条件</legend>
					<div class="layui-field-box">
						<form class="layui-form">
							<div class="layui-form-item">
								<label class="layui-form-label">部门编号</label>
								<div class="layui-input-inline">
									<input type="text" name="code" placeholder="请输入部门编号"
										autocomplete="off" class="layui-input">
								</div>
								<label class="layui-form-label">部门名称</label>
								<div class="layui-input-inline">
									<input type="text" name="name" placeholder="请输入部门名称"
										autocomplete="off" class="layui-input">
								</div>
								<label class="layui-form-label"></label>
								<div class="layui-input-inline">
									<input type="button" class="layui-btn" lay-submit
										lay-filter='sel' value='查询'> <input type="reset"
										class="layui-btn layui-btn-primary" value='重置'>
								</div>
								<input type="button" class="layui-btn " value='添加'
									onclick='openAdd()'>
							</div>
							<input type="hidden" name='action' value='list' /> <input
								type="hidden" name='pageIndex' value='1' /> <input
								type="hidden" name='pageLimit' value='10' />
						</form>
					</div>
				</fieldset>
			</div>
		</div>
	</div>
	<table class='layui-table'>
		<colgroup>
			<col width="15%">
			<col width="20%">
			<col width="20%">
			<col width="25%">
			<col width="10%">
			<col>
		</colgroup>
		<thead>
			<tr>
				<th>序号</th>
				<th>编号</th>
				<th>名称</th>
				<th>电话</th>
				<th>人数</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id='user_tbody'></tbody>
	</table>
	<div id="pageInfo" style="text-align: right; padding-right: 30px"></div>
	<!-- 	分页标签 -->

	<script type="text/javascript">
		//var element = layui.element;
		element.render();//渲染

		fromOn('/department', 'submit(sel)', 'json', function(data) {
			console.log(data)
			var pageIndex = $("input[name='pageIndex']").val();
			var pageLimit = $("input[name='pageLimit']").val();
			setPageInfo('pageInfo', data.count, pageIndex, pageLimit, function(
					obj, first) {
				$("input[name='pageIndex']").val(obj.curr);//得到当前页，以便向服务端请求对应页的数据
				$("input[name='pageLimit']").val(obj.limit);//得到每页显示天数
				if (!first) {//首次不执行
					refresh()
				}
			})
			var html = ''
			$.each(data.data, function(index, element) {//模板引擎
				element.id = (index + 1)+(pageIndex-1)*pageLimit
				html += laytpl($("#tradd").html()).render(element)
			})
			$("#user_tbody").html(html);
		})
		//laypage.render({
		//	elem:"pageInfo",
		//	count:data.count,//数据总数
		//	limits:[10,20,30,40,50,60],
		//	layout:['count','prev','page','next','limit','refresh','skip'],
		//	curr:pageIndex,
		//	limit:pageLimit,
		//	jump:function(obj,first){//obj(当前分页的所有选项值)first(是否首选，一般用于初始加载的判断)
		//		$("input[name='pageIndex']").val(obj.curr);//得到当前页，以便向服务端请求对应页的数据
		//		$("input[name='pageLimit']").val(obj.limit);//得到每页显示天数
		//		if(!first){//首次不执行
		//			refresh()
		//		}
		//	}
		//})

		//fromOn('/department', 'submit(sel)', 'json', function(data) {
		//	console.log(data)
		//	var html = ''
		//	$.each(data,function(index,element){//模板引擎
		//		element.id = index+1
		//		html += laytpl($("#tradd").html()).render(element)
		//	})
		//	$("#user_tbody").html(html);

		//$.each(data,function(index,d){
		//	var html1 = '<tr>'//字符串拼接
		//	+'<td>'+(index+1)+'</td>'
		//	+'<td>'+d.code+'</td>'
		//	+'<td>'+d.name+'</td>'
		//	+'<td>'+d.tel+'</td>'
		//	+'<td>'
		//	+"<input onclick='del(\"{{d.code}}\")' type='button' value='删除' class='layui-btn layui-btn-sm'/>"
		//    +'</td>'
		//	+'<tr>'
		//	html += html1;
		//	})
		//	$("#user_tbody").html(html);
		//})

		refresh();
		function refresh() {//打开时自动点击查询显示数据
			$("input[value='查询']").click();
		}
		function openAdd() {

			openLayer("/web/page/department/add.jsp", refresh)
		}
		function del(code) {
			layer.confirm("确定是否删除？", {
				icon : 3,
				title : '提示'
			}, function(index) {
				ajax('/department', {
					code : code,
					action : 'del'
				}, 'text', function(data) {
					if (1 == data) {
						layer.msg("删除成功", refresh)
					} else {
						layer.msg("删除失败")
					}
				})
			});
		}
		function openUpd(code) {

			openLayer("/web/page/department/upd.jsp?code=" + code, refresh)
			//ajax请求方式回显

			//openLayer("/department?action=upd2&code="+code,refresh)
			//请求转发方式回显
		}
	</script>
	<script type="text/html" id='tradd'>
<tr>
    <td>{{d.id}}</td>
	<td>{{d.code}}</td>
	<td>{{d.name}}</td>
	<td>{{d.tel}}</td>
	<td>{{d.count}}</td>
    <td>
        <a href="javascript:del('{{d.code}}');" class='layui-btn layui-btn-sm layui-btn-danger'>
			<i class='layui-icon layui-icon-delete'></i>
		</a>
        <input onclick='openUpd("{{d.code}}")' type='button' value='修改' class='layui-btn layui-btn-sm'/>
    </td>
</tr>
</script>
</body>
</html>